<template>
	<view>
		<view v-if='dataList.length!==0'>
			<view class='header'>
				<view>富阳区行政事业单位资产清查盘损 ( 亏 ) 申请处置审批表</view>
			</view>
			<view class='container'>
				<view style='display: flex;font-size: 10px;'>
					<view style='flex:3'>填报单位: {{dataList[0].enterpriseName}}</view>
					<view style='flex:1;text-align: right;'>金额:元 共1页</view>
				</view>
				<view class='tableWrap'>
					<!--  -->
					<vxe-table :height="initHeight" :data="dataList" border resizable show-overflow style="width: 100%"
					 show-footer-overflow show-footer :footer-method="footerMethod" :header-cell-style="{
				          'font-size':'13px',
				          'font-weight':'400',
				          'background-color': 'rgb(64, 158, 255)',
				          'color':'#fff',
				          'text-align':'center',
						  'line-height':'14px'
				        }"
					 :cell-style="{
				          'text-align':'center',
						  'font-size':'12px',
						  'line-height':'14px'
				        }">
						<vxe-table-column title="序号" type="seq" width="50" fixed='left' />
						<vxe-table-column fixed='left' title="单位" width="150" field="enterpriseName" />
						<vxe-table-column field="name" title="盘损(亏)资产名称及型号规格" width="200" />
						<vxe-table-column field="count" title="数量" width="120" />
						<vxe-table-column field="bookValue" title="账面价值" width="130" />
						<vxe-table-column field="offMoney" title="申请核销金额" width="130" />
						<vxe-table-column show-overflow-tooltip field="reason" title="申请核销原因说明(详细请另附书面说明和证明材料)" width="250" />
						<vxe-table-column field="dutyReason" title="责任追究说明" width="200" />
						<vxe-table-column field="managerOffMoney" title="主管部门审批核销金额" width="150" />
						<vxe-table-column field="financeOffMoney" title="财政部门审批核销金额" width="150" />
						<vxe-table-column field="remark" title="备注" width="250" />
					</vxe-table>
				</view>

			</view>
		</view>
		<view v-else style='text-align: center;'>
			<image mode='aspectFit' style='height: 500px;width: 300px;' src='../../../../../static/img/loading.png' />
		</view>
	</view>
</template>

<script>
	import XEUtils from 'xe-utils'
	export default {
		props: {
			dataList: {
				type: Array,
				default: {}
			}
		},
		data() {
			return {
				loading: false,
				tableData: [],
				initHeight: ''
			}
		},

		created() {
			this.initHeight = document.body.clientHeight - 180
		},
		methods: {
			footerMethod({
				columns,
				data
			}) {
				const footerData = [
					columns.map((column, columnIndex) => {
						if (columnIndex == 0) {
							return '合计'
						} else {
							if (column.property == 'remark' || column.property == 'dutyReason' || column.property == 'reason' || column.property ==
								'name' || column.property == 'enterpriseName') {
								return '--'
							} else {
								return XEUtils.sum(data, column.property)
							}
						}
					})
				]
				return footerData
			}
		},

	}
</script>

<style scoped lang='scss'>
	.tableWrap /deep/ .vxe-table .vxe-cell {
		white-space: pre-line;
		word-break: break-all;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.tableWrap /deep/ .vxe-table .vxe-header--column:not(.col--ellipsis) {
		padding: 5px 0;
		overflow-x: auto;
	}

	.header {
		text-align: center;
		text-align: center;
		font-size: 16px;
		margin-top: 5px;
	}

	.dateTitle {
		margin-top: 8px;
		font-size: 13px;
		color: gray;
	}

	.container {
		margin-top: 5px;
		padding: 5px 10px;
		background: #fff;
		margin: 8px 0px;
	}

	.tableWrap {
		margin-top: 10px;
	}
</style>
